<template>
  <UView name="采集的站点内容" >
    <UViewSearch v-model="searchModel">
      <URow col="search">
        <USelectItem field="sitesId" label="带货平台" url="/crawler/sites/list"
                     labelField="name" valueField="id" :allowClear="true"/>
        <UInputItem field="type" label="类型" :allowClear="true"/>
        <UButton func="query" url="/crawler/siteContent/view" @click="search">搜索</UButton>
        <UButton func="reset">重置</UButton>
<!--        <UButton func="add" url="/crawler/siteContent/add" v-auth="'crawler:siteContent:add'">新增</UButton>-->
      </URow>
    </UViewSearch>
    <UViewModal title="采集的站点内容管理" :span="[7, 14]" v-model="editModel" :rules="rules">
      <template #default="{model}">
        <UInputItem field="title" label="内容标题" />
        <UInputItem field="alias" label="别名" />
        <UInputItem field="type" label="类型" />
        <UInputItem field="content" label="采集内容" />
        <UInputItem field="ext128" label="扩展1" />
        <UInputItem field="ext256" label="扩展256" />
        <UInputItem field="ext512" label="扩展512" />
        <UInputItem field="extText" label="扩展文本" />
      </template>
      <template #footer>
        <UButton func="cancel">取消</UButton>
        <UButton func="submit" url="/crawler/siteContent/saveOrUpdate">提交</UButton>
        <UButton func="reset">重置</UButton>
      </template>
    </UViewModal>
    <AModal v-model:open="cutOpen" width="70%" destroyOnClose :maskClosable="false">
      <template #title>
        <div style="text-align: center">{{editModel.title}}</div>
      </template>
      <a-tabs v-model:activeKey="activeKey" centered tabPosition="left">
        <a-tab-pane key="image">
          <template #tab>
            <span>图片</span>
          </template>
          <div style="height: 580px; overflow: auto">
            <ARow :gutter="16">
              <ACol v-for="image in images" style="margin: 8px 0px;">
                <a-image :width="270" :height="480" :src="'http://127.0.0.1:8085' + image.localUrl"/>
              </ACol>
            </ARow>
          </div>
        </a-tab-pane>
        <a-tab-pane key="video">
          <template #tab>
            <span>视频</span>
          </template>
          <div style="height: 580px; overflow: auto">
            <ARow :gutter="16">
              <ACol v-for="video in videos">
                <video controls width="270" height="480">
                  <source :src="'http://127.0.0.1:8085' + video.localUrl" type="video/mp4">
                </video>
              </ACol>
            </ARow>
          </div>
        </a-tab-pane>
      </a-tabs>
      <template #footer>
        <div style="text-align: center">
          <ASpace>
            <AButton @click="() => cutOpen = !cutOpen">取消</AButton>
            <AButton @click="openDir" type="dashed">打开目录</AButton>
            <AButton type="primary" @click="startCut">开始剪辑</AButton>
          </ASpace>
        </div>
      </template>
    </AModal>
    <ARow :gutter="16">
      <ACol v-for="item in details" style="margin: 8px 0px">
        <a-card hoverable style="width: 280px">
          <template #cover>
            <img alt="封面" :src="item.coverUrl" />
          </template>
          <template #actions>
            <span>
              <EditOutlined key="edit" /> 修改
            </span>
            <span>
              <SettingOutlined key="setting" /> 删除
            </span>
            <span @click="() => openCut(item)">剪辑信息</span>
          </template>
          <a-card-meta :title="item.title">
            <template #avatar>
              <a-avatar src="https://joeschmoe.io/api/v1/random" />
            </template>
            <template #description>
              <ASpace style="font-size: 12px;">
                <span>{{item.priceText}} ¥{{item.price}}</span>
                <span style="color: red">赚 {{item.cosFee}}</span>
              </ASpace>
            </template>
          </a-card-meta>
        </a-card>
      </ACol>
    </ARow>

<!--    <UViewTable :columns="columns" :scroll="{x: 1200}">-->
<!--      <template #action="{record}">-->
<!--        <UTag func="ajax" :data="record" url="/crawler/siteContent/cut">开始剪辑</UTag>-->
<!--        <UTag func="edit" :data="record" url="/crawler/siteContent/edit" v-auth="'crawler:siteContent:edit'">修改</UTag>-->
<!--        <UTag func="del" :data="record" url="/crawler/siteContent/del" v-auth="'crawler:siteContent:del'">删除</UTag>-->
<!--      </template>-->
<!--    </UViewTable>-->
  </UView>
</template>
<!-- 采集的站点内容功能 -->
<script>
import {ref, reactive} from "vue";
import {EditOutlined, EllipsisOutlined, SettingOutlined} from "@ant-design/icons-vue";
import CoreConsts from "@/components/CoreConsts";
export default {
  name: "SiteContent",
  components: {SettingOutlined, EditOutlined, EllipsisOutlined},
  setup() {
    let types = ref([
      {label: '视频带货', value: 'video'},
      {label: '直播带货', value: 'live'},
    ])

    let columns = ref([
          {field: "title", title: "标题", width: 400, resizable: true},
          // {field: "alias", title: "别名", width: 120},
          {field: "sitesId", title: "所属站点", width:150, resizable: true
            , url: '/crawler/sites/list', labelField: 'name', valueField: 'id'},
          {field: "type", title: "类型", options: types, width: 80},
          {field: "price", title: "价格", width: 100},
          {field: "content", title: "内容", resizable: true, width: 500},
          {field: "ext128", title: "扩展1", resizable: true, width: 180},
          {field: "ext256", title: "扩展2", resizable: true, width: 180},
          {field: "ext512", title: "扩展3", resizable: true, width: 180},
          {field: "extText", title: "扩展4", resizable: true, width: 180},
          {field: "extJson", title: "扩展5", resizable: true, width: 180},
          {field: "createTime", title: "采集时间", width: 150, fixed: 'right'},
          {field: 'action', title: '操作', type: 'action', fixed: 'right', width: 260},
      ]);

    let rules = reactive({ })

    let images = ref([]);
    let videos = ref([]);
    let details = ref([]);
    let editModel = ref({});
    let cutOpen = ref(false);
    let activeKey = ref('video');
    let searchModel = ref({current: 1, size: 16});
    return {columns, rules, editModel, searchModel, types, details, cutOpen, activeKey, images, videos}
  },
  mounted() {
    this.search();
  },
  methods: {
    search() {
      this.$http.get("/crawler/siteContent/view", {params: this.searchModel}).then(({code, message, data}) => {
        if(code === CoreConsts.SuccessCode) {
          this.details = data?.records;
        } else {
          this.$msg.error(message);
        }
      })
    },
    openCut(detail) {
      this.editModel = detail;
      this.cutOpen = !this.cutOpen;
      this.images = []; this.videos = [];
      this.$http.get("/crawler/siteContent/edit", {params: {id: detail.id}})
          .then(({code, message, data}) => {
        if(code === CoreConsts.SuccessCode) {
          this.editModel = data;
          let medias = data.medias;
          if(medias instanceof Array) {
            this.videos = medias.filter(item => item.type === 'video');
            this.images = medias.filter(item => item.type === 'image');
          }
        } else {
          this.$msg.error(message);
        }
      })
    },
    startCut() {

    },
    openDir() {
      this.$http.post(`/crawler/siteContent/openDir?id=${this.editModel.id}`).then(({code, message, data}) => {
        if(code === CoreConsts.SuccessCode) {

        } else {
          this.$msg.error(message);
        }
      });
    }
  }
}
</script>
<style scoped> </style>
